.badges {
  @include transition(all 1s ease);
  overflow: hidden;
  height: 3200px;

  &.collapsed {
    height: 0;
  }
}

.badge {
  height: 320px;
  padding-top: 100px;
  text-align: center;

  @media only screen and (max-width: $mobile) {
    padding-top: 135px;
  }

  img {
    height: 50px;
    display: block;
    margin: 0 auto 40px auto;

    @media only screen and (max-width: $mobile) {
      max-width: 280px;
      @include size(auto 35px);
      margin-bottom: 0;
    }
  }

  $beige: #F4F4F0;

  &:first-child {
    background-color: $beige;
  }

  &:nth-child(2) {
    background-color: #C1D72E;
  }

  &:nth-child(3) {
    background-color: #393D43;
  }

  &:nth-child(4) {
    background-color: $beige;
  }

  &:nth-child(5) {
    background-color: #FF7B00;
  }

  &:nth-child(6) {
    background-color: #263C4A;
  }

  &:nth-child(7) {
    background-color: $beige;
  }

  &:nth-child(8) {
    background-color: #26C7D5;
  }

  &:nth-child(9) {
    background-color: #EA004C;
  }

  &:last-child {
    background-color: $beige;
  }
}
